<template>
  <div class="drag optional" @click.stop="$parent.$parent.onEditer(index)" :class="{selected: index === selectedIndex}"
    :style="'background-color:'+item.style.background+';'">
    <div class="diy-banner" :style="'height:'+(item.style.height*0.5)+'px;'" :class="item.style.imgShape">
      <div class="img-list">
        <div  :key="index" v-for="(banner, index) in item.data"  v-if="index <= 1" 
        :style="item.style.imgShape=='square'?'':'padding-bottom:'+(item.style.height*0.04)+'px;'">
          <img :style="item.style.imgShape=='square'?'height:'+(item.style.height*0.5)+'px;':'height:'+(item.style.height*0.46)+'px;'" v-img-url="banner.imgUrl">
        </div>
      </div>
      <div class="dots center d-c-c">
        <div :key="index" :class="index==0?'active '+item.style.btnShape:item.style.btnShape"
          v-for="(banner,index) in item.data" :style="index==0?'background:item.style.btnColor':''"></div>
      </div>
    </div>
    <div class="btn-edit-del">
      <div class="btn-del" @click.stop="$parent.$parent.onDeleleItem(index)">删除</div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {

      };
    },
    props: ['item', 'index', 'selectedIndex'],
    methods: {

    }
  };
</script>

<style lang="scss">
  .p15{
    padding: 15px;
  }
  .diy-banner.round {
    padding: 12px;
    box-sizing: content-box;
    overflow: hidden;
    text-align: center;
  }

  .diy-banner.round img {
    width: 100%;
    height: 100px;
    object-fit: fill;
    border-radius: 10px;
    margin-bottom: 12px;
    box-sizing: content-box;
  }

  .diy-banner.square {
    height: 100px;
    overflow: hidden;
    text-align: center;
  }

  .diy-banner.square img {
    width: 100%;
    height: 100px;
    object-fit: fill;
  }

  .diy-banner.square .dots {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    bottom: 10px;
  }

  .diy-banner.round .dots {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    bottom: 20px;
  }

  .diy-banner .dots .square,
  .diy-banner .dots .round,
  .diy-banner .dots .rectangle {
    bottom: 40rpx;
    left: 0;
    right: 0;
    margin: auto;
  }

  .diy-banner .dots .square {
    width: 7px;
    height: 7px;
    margin: 0 2px;
    background: #ebedf0;
    opacity: 0.3;
  }

  .diy-banner .dots .round {
    width: 11px;
    height: 11px;
    margin: 0 2px;
    background: #ebedf0;
    opacity: 0.3;
    border-radius: 50%;
  }

  .diy-banner .dots .rectangle {
    width: 20px;
    height: 3px;
    margin: 0 2px;
    background: #ebedf0;
    opacity: 0.3;
    border-radius: 4rpx;
  }

  .diy-banner .dots .active {
    opacity: 1;
  }
</style>
